<html lang="en">
    <head>
        <style>
            body{
                width:1024px;
                font-size: 36px;
                font-family: 'Armata', sans-serif;
				background: url(images/pt-2.png);
				color: #eee;
				text-shadow: 1px 1px 2px #000;
            }

            #start{
                text-align:center;
                width:1024px;
               
            }
            #slide1{
                text-align:center;
                width:1024px;
                
            }
            #slide2{
                text-align:center;
                width:1024px;
               
            }

            .step{
                text-align:center;
                width:1024px;
               
            }

            #slide7{
                width:400px;
            }
            #slide8{
                width:400px;
            }
            #slide9{
                width:400px;
            }
			#slide12{
                width:1024px;
				font-size: 24px;
            }

            .hint_text{
				margin-top: 120px;
                font-size:30px;
                background-color:#282a2f;
                padding:15px;
				border: 1px solid #484d52;
				border-radius: 5px;
				font-size: 18px;
				
            }



            .fallback-message {
               	color: #eee;
                line-height: 1.3;
                width: 780px;
                padding: 10px 10px 0;
                margin: 20px auto;
                border: 1px solid #E4C652;
                border-radius: 10px;
              
            }

            .fallback-message p {
                margin-bottom: 10px;
            }

            .impress-supported .fallback-message {
                display: none;
            }
			em{
				font-style: normal;
				border-bottom: 1px solid #484d52;
				padding-bottom: 2px;
				color: #d5a830;
			}
        </style>
    </head>
    <body class="impress-not-supported">



        <div id="impress">
            <div id="start" class="step" >
                <p>Simple Way for Neo4j Visualization</p>
                <p>Ramazan FIRIN</p>
                <p class='hint_text'>Press <em>Spacebar</em> or Tab To Get Started</p>
            </div>

            <div id="slide1" class="step" data-y="1200" data-x="500">
                <p><font color="yellow">Agenda</font></p>
				<p>Why Visualization?</p>
                <p>How Visualization?</p>	
				<p>Very simple way for Neo4j visulation</p>
				
            </div>

            <div id="slide2" class="step" data-x="1200">
                <p><font color="yellow">Why Visulation?</font></p>	
				<p>To understand relationships</p>
				<p>To capture knowledge from graph</p>
				<p>To see, what you have been missing</p>
				<p>For more beatiful view</p>

            </div>

            <div id="slide3" class="step" data-x="2200" data-y="500">
               <p><font color="yellow">How Visulation? - Gephi</font></p>	
			   <p><img src="./images/gephi.png" alt="Smiley face" ></p>
            </div>

            <div id="slide4" class="step" data-x="2200" data-y="-500">
                <p><font color="yellow">How Visulation? - Sigma.js</font></p>	
			   <p><img src="./images/sigma.png" alt="Smiley face" ></p>	
            </div>

            <div id="slide5" class="step" data-x="3200" data-rotate="150">
               <p><font color="yellow">How Visulation? - Processing.js</font></p>	
			   <p><img src="./images/processing.png" alt="Smiley face" ></p>		
            </div>

            <div id="slide6" class="step" data-x="6200" data-scale='3'>
                <p><font color="yellow">How Visulation? - D3.js</font></p>	
			   <p><img src="./images/D3.png" alt="Smiley face" ></p>	
            </div>

			
            <div id="slide7" class="step" data-x="4200" data-y='1500' data-z='1500'>
                <p><font color="yellow">Perfect Blog for visulation </font></p>	
			   <p><img src="./images/maxdemarzi.png" alt="Smiley face" ></p>
            </div>

            <div id="slide8" class="step" data-x="4900" data-y='1500' data-z='100'>
                <p><font color="yellow">We need Ruby? </font></p>		
				<p>All samples on internet need ruby..</p>
				<p>We really need it?....</p>
            </div>

            <div id="slide9" class="step" data-x="5600" data-y='1500' data-z='-1500'>
                 <p><font color="yellow">Which component we need?</font></p>		
				<p>An html page.</p>	
				<p>And a datasource..(neo4j)</p>	
			</div>

            <div id="slide10" class="step" data-x="6600" data-y='3000' data-scale='10'>
                 <br></br><br></br><br></br>
				 <p><font color="yellow">Which component we need for html?</font></p>		
				<p>A graph library to draw graph </p>	
				<p>A library to pull data from server  by ajax (jquery is perfect)</p>	
            </div>

			<div id="slide11" class="step" data-x="7600" data-y='2000' data-scale='2' data-rotate="150">
              
				 <p><font color="yellow">Which properties we need for visulation?</font></p>		
				<p>Properties of node</p>	
				<p>Relations of nodes</p>	
				<p>Properties of relationship</p>
            </div>

			<div id="slide12" class="step" data-x="9600" data-y='2000' data-scale='1' >
              
				 <p><font color="yellow">If you have id of node,you have everything</font></p>		
				<p>"outgoing_relationships": "http://localhost:7474/db/data/node/284/relationships/out",</p>
                <p>"property" : "http://localhost:7474/db/data/node/284/properties/{key}",</p>
				<p>"all_relationships" : "http://localhost:7474/db/data/node/284/relationships/all",</p>
				<p>""properties" : "http://localhost:7474/db/data/node/284/properties",</p>
				<p>"incoming_relationships« : "http://localhost:7474/db/data/node/284/relationships/in",</p>
				<p>""data" : {     "properties-returnCodes" : "0, 9998, 9999",</p>

	
            </div>
			
			<div id="slide13" class="step" data-x="13600" data-y='2000' data-scale='5' >
              
				 <p><font color="yellow">Solution : Vivagraph.js</font></p>		
				<p>Simple</p>	
				<p>Good examples</p>	
				<p>Opensource</p>
				<p>https://github.com/anvaka/VivaGraphJS</p>
            </div>
			
			<div id="slide14" class="step" data-x="13600" data-y='2000' data-scale='5' >
              
				 <p><font color="yellow">Sample code… Show graph</font></p>		
				<p><img src="./images/code1.png" alt="Smiley face" ></p>	
				
            </div>
			
			<div id="slide15" class="step" data-x="13600" data-y='5000' data-scale='2' >
              
				 <p><font color="yellow">Sample Code  - Draw Node..</font></p>		
				<p><img src="./images/code2.png" alt="Smiley face" ></p>	
				
            </div>
			
			<div id="slide16" class="step" data-x="13600" data-y='7000' data-scale='1' data-rotate="90">
              
				 <p><font color="yellow">Sample Code  - getOutRelation..</font></p>		
				<p><img src="./images/code3.png" alt="Smiley face" ></p>	
				
            </div>
			
			<div id="slide17" class="step" data-x="15600" data-y='9000' data-scale='2' data-rotate="250">
              
				 <p><font color="yellow">Sample Code  - getAllProperties..</font></p>		
				<p><img src="./images/code4.png" alt="Smiley face" ></p>	
				
            </div>
			
			<div id="slide18" class="step" data-x="18600" data-y='12000' data-scale='2' >
              
				 <p><font color="yellow">Output</font></p>		
				<p><img src="./images/output.png" alt="Smiley face" ></p>	
				<p><font color="yellow">https://github.com/ramazanfirin/neo4visulationVivagraph/
</font></p>	
				
            </div>
			
			<div id="slide19" class="step" data-x="19600" data-y='11000' data-scale='1'>
              
				 <p><font color="yellow">THANKS</font></p>		

				
            </div>
			
        </div>

        <div class="fallback-message">
            <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
            <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
        </div>


        <script type="text/javascript" src="js/impress.js"></script>
        <script type="text/javascript">impress().init();</script>



    </body>
</html>


